<template>
  <ul>
    <li>
      <t-editor v-model="content" />
    </li>
    <li>
      <h2>预览</h2>
      <t-editor-preview v-model="content" />
    </li>
  </ul>
</template>

<script>
  import { defineComponent } from 'vue'

  const DEFAULT_CONTENT = `
    <p style="text-align:center;">
    <span class="text-huge"><span>一个居中的字号很大的标题</span></span>
</p>
<figure class="table" style="width:315.02pt;">
    <table>
        <tbody>
            <tr>
                <td style="background-color:#F2F2F2;border-color:#8EA9DB;border-width:.5pt;color:#44546A;font-size:16.0pt;height:30.00pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;width:157.50pt;">
                    Apr
                </td>
                <td style="background-color:#F2F2F2;border-color:#8EA9DB;border-width:.5pt;color:#44546A;font-size:16.0pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;width:157.50pt;">
                    May
                </td>
            </tr>
            <tr>
                <td style="background-color:#C6EFCE;color:#000000;font-size:14.0pt;height:23.00pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                    $87,533
                </td>
                <td style="color:#FF0000;font-size:12.0pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                    $43,659
                </td>
            </tr>
            <tr>
                <td style="background-color:#C6EFCE;color:#000000;font-size:14.0pt;height:23.00pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                    $51,425
                </td>
                <td style="color:#FF0000;font-size:14.0pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                    $23,441
                </td>
            </tr>
            <tr>
                <td style="background-color:#FFC7CE;color:#FFFFFF;font-size:14.0pt;height:23.00pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                    $3,231
                </td>
                <td style="color:#000000;font-size:14.0pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                    $39,901
                </td>
            </tr>
            <tr>
                <td style="background-color:#FFC7CE;color:#000000;font-size:14.0pt;height:23.00pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                    $2,038
                </td>
                <td style="background-color:#C6EFCE;color:#000000;font-size:14.0pt;padding-left:1px;padding-right:1px;padding-top:1px;text-align:center;">
                    $98,593
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-family:'Courier New', Courier, monospace;"><span>font</span></span>
                </td>
                <td>
                    <span class="text-big" style="font-family:'Courier New', Courier, monospace;"><span>font-size</span></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="text-big" style="font-family:'Courier New', Courier, monospace;"><span><strong>blob</strong></span></span>
                </td>
                <td>
                    <span class="text-big" style="font-family:'Courier New', Courier, monospace;"><i><span>斜体</span></i></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span style="color:hsl(0,75%,60%);"><span>字体颜色</span></span>
                </td>
                <td>
                    <span style="background-color:hsl(180,75%,60%);color:hsl(0,75%,60%);"><span>背景色</span></span>
                </td>
            </tr>
            <tr>
                <td>
                    <span style="font-family:'Courier New', Courier, monospace;"><span>左对齐</span></span>
                </td>
                <td>
                    <a href="//baidu.com"><span class="text-big"><span>链接</span></span></a>
                </td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li>
                            有序列表
                        </li>
                        <li>
                            列表项1
                        </li>
                        <li>
                            列表项2
                        </li>
                    </ol>
                </td>
                <td>
                    <ul>
                        <li>
                            无序列表
                        </li>
                        <li>
                            item1
                        </li>
                        <li>
                            item2
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td>
                    <figure class="image">
                        <img src="http://placekitten.com/g/160/160">
                    </figure>
                </td>
                <td>
                    <p style="text-align:right;">
                        <span class="text-huge"><span>右对齐</span></span>
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
</figure>
<p>
    哈哈哈
</p>
  `

  export default defineComponent({
    data() {
      return {
        content: DEFAULT_CONTENT
      }
    }
  })
</script>

<style lang="less" scoped>
  ul {
    display: flex;
    list-style: none;

    li {
      flex: 1;

      + li {
        margin-left: 20px;
        border: 1px solid var(--ck-color-base-border);
        border-radius: 2px;
        overflow: hidden;
      }
    }
  }

  h2 {
    margin: 0;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid var(--ck-color-base-border);
    background-color: var(--ck-color-toolbar-background);
    text-indent: 10px;
  }

  .t-editor-preview {
    min-height: 31px;

    > :first-child {
      margin-top: var(--ck-spacing-large);
    }
  }
</style>
